<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>node列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="/js/xkube.js?v=1.0.0" charset="utf-8"></script>

<style type="text/css">
  .layui-table-cell {
    height: auto;
    line-height: 22px !important;
    text-overflow: inherit;
    overflow: ellipsis;
    white-space: normal;
  }
  .layui-table-cell .layui-table-tool-panel li {
    word-break: break-word;
  }
</style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <table class="layui-table" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-sm" lay-event="nodeDrain">节点排水</a>
            <a class="layui-btn layui-btn-sm" lay-event="nodeUnschedulable">调度设置</a>
        </script>
    </div> 
</div>
</body>

<script type="text/html" id="nodeInfoTpl">
    {{# layui.each(d.nodeInfo.split(','), function(index, item){ }}
        <span>{{ item }}<br></span>
    {{# });  }}
</script>	

<script type="text/html" id="capacityTpl">
    {{# layui.each(d.capacity.split(','), function(index, item){ }}
        <span>{{ item }}<br></span>
    {{# });  }}
</script>	

<script type="text/html" id="allocatableTpl">
    {{# layui.each(d.allocatable.split(','), function(index, item){ }}
        <span>{{ item }}<br></span>
    {{# });  }}
</script>	

<script type="text/html" id="nodeNameTpl">
        <span>{{ d.nodeName }}<br>{{ d.nodeIp }}</span>
</script>	

<script type="text/html" id="nodeStateTpl">
        <span>{{ d.nodeRole }}</span><br>
                {{# if(d.nodeState == "Ready:True") { }}
                        <span style="color:#009688">{{ d.nodeState }}</span>
                {{# }else{ }}
                        <span style="color:#FF5722">{{ d.nodeState }}</span>
                {{# } }}          
</script>	

<script>

var clusterId = getQueryString("clusterId");
if (clusterId == null) {
	clusterId = getCookie("clusterId")
}
//console.log(clusterId);
    layui.use(['form', 'table','miniTab'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
            miniTab = layui.miniTab,
            miniTab.listen();
            
        table.render({
            elem: '#currentTableId',
            url: '/node/v1/List?clusterId='+clusterId,
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            parseData: function(res) { //实现加载全部数据后再分页
            	if(this.page.curr) {
            		result=res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
            	}else{
            	  result=res.data.slice(0,this.limit);
              }
              return {
              	"code": res.code,
              	"msg":'',
              	"count":res.count,
              	"data":result
              };
            },
            cols: [[
                //{type: "checkbox", width: 50},
                {field: 'nodeName', title: '节点名称',hide:true},
                {field: 'nodeIp', title: 'IP',hide:true},
                {field: '', title: '节点名称',templet: '#nodeNameTpl'},
                {field: 'nodeRole', title: '角色', sort: true,hide:true},
                {field: 'nodeState', title: '状态', sort: true,hide:true},
                {field: '', title: '状态', sort: true,templet: '#nodeStateTpl'},
                {field: 'nodeInfo',title: '节点信息', sort: true,templet: '#nodeInfoTpl'},
                {field: 'podCIDR',  title: 'podCIDR', sort: true},
                {field: 'capacity', title: '容量', sort: true,templet: '#capacityTpl'},
                {field: 'allocatable', title: '可分配', sort: true,templet: '#allocatableTpl'},
                {field: 'createTime',title: '创建时间',hide:true},
                {title: '操作', minWidth: 200, toolbar: '#currentTableBar', align: "center"}
            ]],
            //size:'lg',
            limits: [25, 50, 100],
            limit: 25,
            page: true
        });

       table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'nodeDrain') {
                layer.confirm('请确认是否要将以下进行排空节点操作（同时设置为不可调度）'+data.nodeName, {icon: 3, title:'排水提示',yes: function(index){
                     var index2 = layer.load(0, {shade: false});
                     layer.msg('此处需运行1-2s左右');
                			 $.ajax({
                			    url: '/node/v1/Drain?clusterId='+clusterId+"&nodeName="+data.nodeName,
                			    type: "get",
                			    success: function (resp) {
                            layer.close(index2);
                						 if(resp.code == 0){
                							 layer.msg('排水成功', {icon: 1});
                						 }else{
                							 layer.msg(resp.msg,{icon:2});
                						 }
                				  }
                		   });		  	  
                },
            		  cancel: function(index, layero){ 
            			    layer.close(index);
                      layer.close(index2);
            			    console.log("不操作");
            		  } 
        		    }); 
                return false;
            }else if  (obj.event === 'nodeUnschedulable') {
                layer.confirm('请确认是否要将该节点设置为不可调度'+data.nodeName, {icon: 3, title:'提示',yes: function(index){
                     var index2 = layer.load(0, {shade: false});
                     layer.msg('此处需运行1-2s左右');
                      var bodystr = {"unschedulable":true};
                			 $.ajax({
                			    url: '/node/v1/Unschedulable?clusterId='+clusterId+"&nodeName="+data.nodeName,
                  			  headers:{'X-Requested-With':'XMLHttpRequest'},
                          type: "post",
                          data: JSON.stringify(bodystr),
                          dataType: "json",
                			    success: function (resp) {
                            layer.close(index2);
                						 if(resp.code == 0){
                							 layer.msg('更改成功', {icon: 1});
                						 }else{
                							 layer.msg(resp.msg,{icon:2});
                						 }
                				  }
                		   });		  	  
                },
            		  cancel: function(index, layero){ 
            			    layer.close(index);
                      layer.close(index2);
            			    console.log("不操作");
            		  } 
        		    });      
              return false;         
            }
        });

    });
</script>
</html>